<template>
  <el-drawer
    :title="title"
    :visible.sync="visible"
    :size="size"
    :before-close="modelClose"
    :wrapper-closable="false"
  >
    <div class="box-top">
      <div class="headPhoto">
        <img v-if="model.thumbnailUrl && model.thumbnailUrl.length && model.thumbnailUrl[0] !== ''" :src="model.thumbnailUrl[0]">
        <img v-else src="@/assets/img/emptySetmeal.png">
      </div>
      <div class="titleInfo">
        <div class="name">{{ model.name || '--' }}</div>
        <div class="infos">{{ model.serviceTypeName || '--' }}<em>|</em>{{ model.amount }} 元</div>
      </div>
    </div>
    <div class="box-bottom">
      <simpleInfoCard title="基本信息">
        <template slot="contents">
          <div class="contents">
            <el-row>
              <el-col :span="12" class="col">
                <div class="label">服务类型：</div>
                <div class="value">{{ model.serviceTypeName || '--' }}</div>
              </el-col>
              <el-col :span="12" class="col">
                <div class="label">状态：</div>
                <div class="value">{{ model.status ? '上架' : '下架' }}</div>
              </el-col>
              <el-col :span="12" class="col">
                <div class="label">套餐名称：</div>
                <div class="value">{{ model.name || '--' }}</div>
              </el-col>
              <el-col :span="12" class="col">
                <div class="label">服务区域：</div>
                <div class="value">{{ model.serviceRegionName || '--' }}</div>
              </el-col>
              <el-col :span="12" class="col">
                <div class="label">套餐时效：</div>
                <div class="value">{{ model.periodValidityTypeName }} ({{ model.periodValidity }}个月)</div>
              </el-col>
              <el-col :span="12" class="col">
                <div class="label">套餐金额：</div>
                <div class="value">{{ model.amount }} 元</div>
              </el-col>
              <el-col :span="12" class="col">
                <div class="label">关键词：</div>
                <div class="value">{{ model.keyWord || '--' }}</div>
              </el-col>
              <el-col :span="12" class="col">
                <div class="label">每人每日最高单量限制：</div>
                <div class="value">{{ model.dayNumLimit }} 单</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" class="col">
                <div class="label">介绍：</div>
                <div class="value">{{ model.serviceDesc || '--' }}</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" class="col topbottom">
                <div class="label">缩略图：
                  <span v-if="model.thumbnailUrl && model.thumbnailUrl.length">({{ model.thumbnailUrl.length }}张)</span>
                  <span v-else>(0张)</span>
                </div>
                <div class="value box-img-accessory">
                  <div class="accessory">
                    <template v-if="model.thumbnailUrl">
                      <uploadImgArray :value.sync="model.thumbnailUrl" is-look />
                    </template>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" class="col topbottom">
                <div class="label">滚动图：
                  <span v-if="model.scrollImgUrl && model.scrollImgUrl.length">({{ model.scrollImgUrl.length }}张)</span>
                  <span v-else>(0张)</span>
                </div>
                <div class="value box-img-accessory">
                  <div class="accessory">
                    <template v-if="model.scrollImgUrl">
                      <uploadImgArray :value.sync="model.scrollImgUrl" is-look />
                    </template>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>
      </simpleInfoCard>
      <simpleInfoCard title="服务项目">
        <template slot="contents">
          <el-table ref="table" :data="dataSource">
            <el-table-column fixed="left" label="序号" width="60" type="index" />
            <el-table-column prop="serviceProjectName" label="服务项目" min-width="120" />
            <el-table-column prop="amount" label="原价" width="80" />
            <el-table-column prop="frequency" label="频次" width="120">
              <template slot-scope="scope">
                <div>{{ getFrequencyText(scope.row) }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="项目状态" width="100">
              <template slot-scope="scope">
                <div class="box-dot">
                  <span v-if="scope.row.status === 0" class="dot dot1" />
                  <span v-else-if="scope.row.status === 1" class="dot dot2" />
                  <span v-if="scope.row.status === 0">下架</span>
                  <span v-else-if="scope.row.status === 1">上架</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="box-paging">
            <Pagination
              v-show="ipagination.total > 0"
              layout="total, sizes, prev, pager, next"
              :total="ipagination.total"
              :page.sync="ipagination.pageNum"
              :limit.sync="ipagination.pageSize"
              @pagination="loadData"
            />
          </div>
        </template>
      </simpleInfoCard>
    </div>
  </el-drawer>
</template>

<script>
import { postAction } from '@/api/manage'
import { listMixin } from '@/mixins/listMixin'
import simpleInfoCard from '@/components/xm/simpleInfoCard'
import uploadImgArray from '@/components/xm/uploadImg/uploadImgArray'
import Pagination from '@/components/Pagination'
export default {
  components: {
    simpleInfoCard,
    uploadImgArray,
    Pagination
  },
  mixins: [listMixin],
  props: {},
  data() {
    return {
      model: {},
      disableMixinCreated: true,
      title: '',
      size: '50%',
      visible: false,
      url: {
        list: '/service/combo/config/info/listPage'
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    show(rowData) {
      this.model = {}
      this.queryParam.configNo = ''
      this.dataSource = []
      this.visible = true
      this.getDetails(rowData.configNo)
    },
    getDetails(configNo) {
      this.$store.dispatch('app/setLoading', true)
      postAction(`/service/combo/config/detail/${configNo}`, {}).then((res) => {
        if (res.status === 0) {
          this.model = res.data || {}
          this.queryParam.configNo = res.data.configNo
          this.loadData(1)
        } else {
          this.$message.warning(res.message || '操作失败！')
        }
      }).finally(() => {
        this.$store.dispatch('app/setLoading', false)
      })
    },
    // 频次文案
    getFrequencyText(row) {
      try {
        let text = ''
        let unit = ''
        if (row.frequencyUnit === 1) {
          text = '按日, '
          unit = '日'
        } else if (row.frequencyUnit === 2) {
          text = '按周, '
          unit = '周'
        } else if (row.frequencyUnit === 3) {
          text = '按月, '
          unit = '月'
        } else if (row.frequencyUnit === 4) {
          text = '按年, '
          unit = '年'
        }
        if (row.frequencyType === 1) {
          text += `${row.frequency}次/${unit}`
        } else if (row.frequencyType === 2) {
          text += `${row.frequency}时/${unit}`
        }
        return text
      } catch (error) {
        return ''
      }
    },
    modelClose() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__body {
  overflow: auto;
  padding: 24px;
  .box-top{
    display: flex;
    justify-content: flex-start;
    padding: 0 0 10px;
    border-bottom: 1px #dcdfe6 solid;
    .headPhoto{
      border-radius: 50%;
      img{
        width: 75px;
        height: 75px
      }
    }
    .titleInfo{
      margin: 0 20px;
      color: #333;
      .name{
        font-weight: 700;
        font-size: 20px;
        padding: 10px 0 16px;
      }
      .infos{
        display: flex;
        align-items: self-start;
        em{
          margin: -1px 10px;
        }
      }
    }
  }
  .box-bottom{
    margin-top: 16px;
    .contents{
      .col{
        display: flex;
        justify-content: flex-start;
        margin-bottom: 16px;
        .label{
          text-align: right;
          color: #666;
          min-width: 80px;
        }
        .value{
          flex: 1;
          margin-left: 5px;
          color: #333;
        }
      }
      .topbottom{
        flex-direction: column;
        align-items: flex-start;
        .box-img-accessory{
          margin-top: 10px;
        }
      }
    }
  }
}
.box-img-accessory{
  display: flex;
  .accessory{
    margin-right: 20px;
    .el-image{
      width: 90px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      border-radius: 4px;
      background-color: #f5f7fa;
      i{
        color: #9093b2;
      }
    }
    img{
      width: 90px;
      height: 80px;
      margin-right: 10px;
    }
  }
}
.icon-Xm-zanwutupian{
  font-size: 50px;
}
.box-dot{
  display: flex;
  align-items: center;
  .dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
  }
  .dot1{
    background-color: #fea94b;
  }
  .dot2{
    background-color: #82d589;
  }
}
</style>
